<template>
  <section>
    <el-card class="box-card">
      <el-col :span="24" class="mb20">
        <el-col :span="24">
          <div
            class="table_content"
            style="margin-bottom: 1px"
          >
            <el-row :gutter="4">
              <el-form
                :model="searchDto"
                :inline="true"
                ref="searchForm"
                label-width="100px"
              >
                <el-form-item label="部门" prop="deptName">
                  <el-autocomplete
                    class="inline-input"
                    v-model="searchDto.deptName"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    value-key="name"
                    clearable
                    @select="handleSelect"
                  ></el-autocomplete>
                </el-form-item>
                <el-form-item>
                  <el-radio v-model="radio" @change="changeType" border label="1" style="margin-right: 5px;">按月统计</el-radio>
                  <el-radio v-model="radio" @change="changeType" border label="2">按时间段</el-radio>
                </el-form-item>
                <el-form-item
                  label="年月"
                  v-if="radio === '1'"
                  prop="yearMonth"
                >
                  <el-date-picker
                    v-model="searchDto.yearMonth"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime"  v-if="radio === '2'">
                  <el-date-picker
                    v-model="searchDto.startTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始日期"
                    style="width: 100%">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime" v-if="radio === '2'">
                  <el-date-picker
                    v-model="searchDto.endTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择结束日期"
                    style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search()"
            >查询
            </el-button
            >
            <el-button
              type="primary"
              @click="reset()"
              size="small"
              icon="el-icon-remove">重置
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-upload2"
              @click="exportData()"
              size="small"
              v-has="{ class: 'bsjj' }">导出
            </el-button>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="全部" name="ALL">
            </el-tab-pane>
            <el-tab-pane label="区县" name="CITY"></el-tab-pane>
            <el-tab-pane label="市直部门" name="AREA"></el-tab-pane>
          </el-tabs>
          <page-table :page-data="articleList" :do-get-page-data="getArticleList" v-if="radio === '1'" :loading="loading">
            <el-table-column
              prop="id"
              label="部门ID"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="name"
              label="部门名称"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="reportNum"
              label="上报数量"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="auditNum"
              label="采纳数量"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="rate"
              label="采纳率"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="month"
              label="月份"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
          </page-table>
          <page-table :page-data="articleList" :do-get-page-data="getArticleList" v-if="radio === '2'" :loading="loading">
            <el-table-column
              prop="id"
              label="部门ID"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="name"
              label="部门名称"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="reportNum"
              label="上报数量"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="auditNum"
              label="采纳数量"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="rate"
              label="采纳率"
              align="center"
            ></el-table-column>
          </page-table>
        </el-col>
      </el-col>
    </el-card>
  </section>
</template>

<script>
  import {mapGetters} from "vuex";
  import Status from '@/libs/status'
  import _ from 'lodash'

  export default {
    name: "essay",
    created() {
    },
    mounted() {
      this.getDeptAll()
      this.getArticleList()
    },
    data() {
      return {
        radio: '1',
        loading: false,
        filterText: "",
        startAndTime:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        activeName: 'ALL',
        searchDto: {
          deptId: '',//部门id
          deptName: '',
          startTime:"",
          endTime:'',
          deptType:'',
          yearMonth: new Date().Format('yyyy-MM'),
          pageNumber: 1,
          pageSize: 10
        },
        articleList: {},
        deptList: []
      }
    },
    computed: {
      ...mapGetters({})
    },
    methods: {
      handleClick(tab, event) {
        let status = ''
        switch (tab.paneName) {
          case 'ALL':
            status = ''
            break
          case 'CITY':
            status = '1'
            break
          case 'AREA':
            status = '0'
            break
        }
        this.searchDto.deptType = status
        this.search()
      },
      changeType(type){
        if (type === '1'){
          this.searchDto.yearMonth = new Date().Format('yyyy-MM')
          this.searchDto.startTime =""
          this.searchDto.endTime =""
        } else {
          this.searchDto.startTime =  new Date(new Date() - 1000 * 60 * 60 * 24 * 30).Format('yyyy-MM-dd 00:00:00');//最后一个数字30可改，30天的意思
          this.searchDto.endTime = new Date().Format('yyyy-MM-dd 23:59:59')
          this.searchDto.yearMonth =''
        }
        this.getArticleList()
      },
      // 获取所有部门
      getDeptAll() {
        this.API.deptListNotAllUsingPOST().then(res => {
          this.deptList = res.data
        })
      },
      querySearch(queryString, cb) {
        let restaurants = this.deptList;
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) > 0);
        };
      },
      handleSelect(item) {
        console.log(item);
        this.searchDto.deptId = item.id
      },
      // 列表
      getArticleList(search) {
        // if (this.searchDto.yearMonth) {
        //   this.searchDto.yearMonth = new Date(this.searchDto.yearMonth).Format('yyyy-MM')
        // }
        // console.log(this.searchDto)
        if (this.searchDto.startTime){
          this.searchDto.startTime =  new Date(this.searchDto.startTime).Format('yyyy-MM-dd 00:00:00')
        }
        if (this.searchDto.endTime){
          this.searchDto.endTime =  new Date(this.searchDto.endTime).Format('yyyy-MM-dd 23:59:59')
        }

        let data = Object.assign(this.searchDto, search)
        if (this.radio === '1'){
          this.API.ColumnCountUsingPOST_1({dataSearchDto: data}).then(res => {
            this.articleList = res.data
          })
        } else {
          this.API.ColumnCountUsingPOST_1({dataSearchDto: data}).then(res => {
            this.articleList = res.data
          })
        }
      },
      //查询
      search() {
        this.getArticleList()
      },
      //重置
      reset() {
        this.searchDto.deptId = ''
        this.$refs.searchForm.resetFields()
      },
      // 导出
      exportData() {
        if (this.searchDto.startTime){
          this.searchDto.startTime =  new Date(this.searchDto.startTime).Format('yyyy-MM-dd 00:00:00')
        }
        if (this.searchDto.endTime){
          this.searchDto.endTime =  new Date(this.searchDto.endTime).Format('yyyy-MM-dd 23:59:59')
        }
        let para = {dataSearchDto: this.searchDto}
        let fileDownload = require("js-file-download");
        this.ExportApi.deptDataCountExcelUsingPOST(para).then(res => {
          let fileName
          if (this.radio==='1'){
            fileName= this.searchDto.yearMonth+ "部门统计导出.xls";
          }
          else {
            fileName= new Date(this.searchDto.startTime).Format('yyyy-MM-dd')+"-"+ new Date(this.searchDto.endTime).Format('yyyy-MM-dd')+ "部门统计导出.xls";
          }
          fileDownload(res.data, fileName)
        })
      }
    },
    components: {}
  }
</script>

<style scoped lang="less">
  .wanner {
    margin-left: -35px;
    width: 200px;
  }

  /deep/ .el-tree-node {
    margin: 10px 0px;
  }
  /deep/ .el-tabs__header {
    margin: 15px 0px -16px !important;
  }
</style>
